/* VR特效CSS - 用于全局应用高级视觉效果 */

/* ===== 动态背景效果 ===== */
.vr-dynamic-bg {
  position: relative;
  overflow: hidden;
}

/* 高科技网格背景 - 3D透视 */
.vr-grid-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to right, rgba(0, 195, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 195, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(1000px) rotateX(60deg) scale(1.5);
  transform-origin: center 120%;
  animation: grid-flow 20s linear infinite;
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}

@keyframes grid-flow {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 50px;
  }
}

/* 霓虹粒子效果 */
.vr-particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.vr-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0;
  animation: float-particle 15s infinite linear;
}

.vr-particle.blue {
  background-color: rgba(0, 195, 255, 0.8);
}
.vr-particle.purple {
  background-color: rgba(170, 0, 255, 0.8);
}
.vr-particle.pink {
  background-color: rgba(255, 0, 140, 0.8);
}

@keyframes float-particle {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(1.5);
    opacity: 0;
  }
}

/* 霓虹数字雨 */
.vr-digital-rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.2;
  pointer-events: none;
}

.vr-rain-column {
  position: absolute;
  top: -100px;
  width: 1px;
  height: 100vh;
  overflow: hidden;
  animation: rain-fall 15s infinite linear;
}

.vr-rain-drop {
  position: absolute;
  width: 1px;
  height: 10px;
  background: linear-gradient(to bottom, rgba(0, 195, 255, 1), rgba(0, 195, 255, 0));
  animation: rain-glow 2s infinite alternate;
}

@keyframes rain-fall {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100vh);
  }
}

@keyframes rain-glow {
  0% {
    opacity: 0.3;
    box-shadow: 0 0 5px rgba(0, 195, 255, 0.3);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 15px rgba(0, 195, 255, 0.8);
  }
}

/* 全息投影效果 */
.vr-hologram {
  position: relative;
  overflow: hidden;
}

.vr-hologram::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(0, 195, 255, 0.05) 2px,
    rgba(0, 195, 255, 0.05) 4px
  );
  z-index: 0;
  pointer-events: none;
  animation: hologram-scan 5s linear infinite;
}

.vr-hologram::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300%;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 195, 255, 0.15), transparent 100%);
  transform: translateY(-200%);
  animation: hologram-glitch 10s infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes hologram-scan {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100px;
  }
}

@keyframes hologram-glitch {
  0%,
  90%,
  100% {
    transform: translateY(-200%);
    opacity: 0;
  }
  30%,
  60% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 辉光文本效果 */
.vr-neon-text {
  color: #00c3ff;
  text-shadow:
    0 0 5px rgba(0, 195, 255, 0.5),
    0 0 10px rgba(0, 195, 255, 0.3),
    0 0 20px rgba(0, 195, 255, 0.2);
  animation: neon-flicker 4s infinite alternate;
}

@keyframes neon-flicker {
  0%,
  19%,
  21%,
  23%,
  54%,
  56%,
  100% {
    text-shadow:
      0 0 5px rgba(0, 195, 255, 0.5),
      0 0 10px rgba(0, 195, 255, 0.3),
      0 0 20px rgba(0, 195, 255, 0.2);
  }
  20%,
  22%,
  55% {
    text-shadow: none;
  }
}

/* 高级卡片效果 */
.vr-card {
  position: relative;
  border-radius: 15px;
  background: linear-gradient(145deg, #0c0c24, #1a1a3a);
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 195, 255, 0.2);
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: 1;
}

.vr-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 20%, rgba(0, 195, 255, 0.05), transparent 30%),
    radial-gradient(circle at 70% 80%, rgba(170, 0, 255, 0.05), transparent 30%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}

.vr-card::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background: linear-gradient(
    45deg,
    rgba(0, 195, 255, 0),
    rgba(0, 195, 255, 0.3),
    rgba(170, 0, 255, 0.3),
    rgba(0, 195, 255, 0)
  );
  border-radius: 15px;
  z-index: -2;
  background-size: 400% 400%;
  animation: border-flow 8s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.vr-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(0, 195, 255, 0.5);
}

.vr-card:hover::before {
  opacity: 1;
}

.vr-card:hover::after {
  opacity: 1;
}

@keyframes border-flow {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 400% 400%;
  }
}

/* 3D翻转效果 */
.vr-flip-container {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vr-flip-container:hover .vr-flipper {
  transform: rotateY(180deg);
}

.vr-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.vr-front,
.vr-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
}

.vr-back {
  transform: rotateY(180deg);
}

/* 霓虹按钮效果 */
.vr-neon-btn {
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  color: #00c3ff;
  border: 1px solid rgba(0, 195, 255, 0.4);
  border-radius: 8px;
  padding: 12px 30px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.3);
  z-index: 1;
}

.vr-neon-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 195, 255, 0.2), transparent);
  transition: left 0.7s ease;
  z-index: -1;
}

.vr-neon-btn:hover {
  color: #fff;
  border-color: rgba(0, 195, 255, 0.8);
  box-shadow:
    0 0 20px rgba(0, 195, 255, 0.5),
    0 0 40px rgba(0, 195, 255, 0.3);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  transform: translateY(-3px);
}

.vr-neon-btn:hover::before {
  left: 100%;
}

/* 电路板背景 */
.vr-circuit-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0.15;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800"><path fill="none" stroke="rgba(0, 215, 255, 0.5)" stroke-width="1.5" d="M50,50 L50,150 L150,150 L150,250 L300,250 L300,350 L150,350 L150,450 L250,450 L250,550 L350,550 L350,650 L450,650 L450,750 M750,50 L650,50 L650,150 L550,150 L550,250 L600,250 L600,350 L500,350 L500,450 L600,450 L600,550 L700,550 L700,650 L750,650 M50,450 L250,450 M550,350 L750,350 M300,750 L300,550 L400,550 L400,450 L500,450 M550,150 L750,150 M550,650 L750,650 M300,250 L500,250 L500,150"/></svg>');
  pointer-events: none;
  animation: circuit-pulse 10s infinite alternate;
}

@keyframes circuit-pulse {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.2;
  }
}

/* VR头戴设备悬浮效果 */
.vr-headset-float {
  animation: headset-float 6s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes headset-float {
  0%,
  100% {
    transform: translateY(0) rotateY(0);
  }
  25% {
    transform: translateY(-15px) rotateY(5deg);
  }
  50% {
    transform: translateY(0) rotateY(0);
  }
  75% {
    transform: translateY(15px) rotateY(-5deg);
  }
}

/* 震撼视差滚动效果 */
.vr-parallax-container {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.vr-parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-size: cover;
  background-position: center;
  z-index: -1;
  transform: translateZ(0);
  will-change: transform;
}

.vr-parallax-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 数据加载特效 */
.vr-data-loader {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(0, 195, 255, 0.1);
  overflow: hidden;
  border-radius: 2px;
}

.vr-data-loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 195, 255, 0.5), transparent);
  animation: data-loading 2s infinite;
}

@keyframes data-loading {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

/* 扫描线动画 */
.vr-scan-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 195, 255, 0.15) 50%,
    transparent 100%
  );
  background-size: 100% 10px;
  animation: scan-move 10s linear infinite;
  pointer-events: none;
  z-index: -1;
  opacity: 0.3;
}

@keyframes scan-move {
  0% {
    background-position: 0 -1000px;
  }
  100% {
    background-position: 0 1000px;
  }
}

/* 暗色科技风格滚动条 */
::-webkit-scrollbar {
  width: 10px;
  background-color: #0a0a1a;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #0088ff, #00c3ff);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #00c3ff, #aa00ff);
}

/* 打字机效果 */
.vr-typing-text {
  overflow: hidden;
  border-right: 2px solid #00c3ff;
  white-space: nowrap;
  margin: 0 auto;
  animation:
    typing 3.5s steps(40, end),
    blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #00c3ff;
  }
}

/* 高级背景动画 - 新增 */

/* 3D立体网格空间 */
.vr-space-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  pointer-events: none;
  z-index: -1;
  opacity: 0.4;
}

.vr-grid-plane {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background:
    linear-gradient(90deg, rgba(0, 195, 255, 0.1) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 195, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotateX(75deg);
  animation: grid-space-move 25s linear infinite;
}

@keyframes grid-space-move {
  0% {
    background-position: 0 0;
    transform: translate(-50%, -50%) rotateX(75deg) translateZ(0px);
  }
  100% {
    background-position: 40px 40px;
    transform: translate(-50%, -50%) rotateX(75deg) translateZ(500px);
  }
}

/* 光子流动效果 */
.vr-photon-stream {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.vr-photon {
  position: absolute;
  width: 2px;
  height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(0, 195, 255, 0.8), transparent);
  opacity: 0;
  transform-origin: top;
  animation: photon-fall 8s linear infinite;
}

@keyframes photon-fall {
  0% {
    opacity: 0;
    transform: translateY(-100px) translateX(0) rotate(0deg);
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateY(calc(100vh + 100px)) translateX(50px) rotate(10deg);
  }
}

/* 量子波动背景 */
.vr-quantum-waves {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;
  overflow: hidden;
}

.vr-wave {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 195, 255, 0.3);
  opacity: 0;
  transform-origin: center;
  animation: wave-expand 10s ease-out infinite;
}

@keyframes wave-expand {
  0% {
    width: 0;
    height: 0;
    opacity: 0.7;
    transform: translate(-50%, -50%);
  }
  70% {
    opacity: 0.3;
  }
  100% {
    width: 300vw;
    height: 300vw;
    opacity: 0;
    transform: translate(-50%, -50%);
  }
}

/* 数据矩阵背景 */
.vr-data-matrix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: -2;
  overflow: hidden;
  opacity: 0.15;
  pointer-events: none;
}

.vr-data-column {
  position: absolute;
  top: -20%;
  width: 20px;
  font-family: monospace;
  font-size: 14px;
  color: #00c3ff;
  text-align: center;
  text-shadow: 0 0 5px rgba(0, 195, 255, 0.7);
  animation: data-fall linear infinite;
}

.vr-data-bit {
  opacity: 0;
  animation: data-fade 2s linear infinite;
  animation-delay: calc(var(--delay) * 0.1s);
}

@keyframes data-fall {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(120vh));
  }
}

@keyframes data-fade {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* 全息信息面板 */
.vr-holo-panel {
  position: relative;
  border: 1px solid rgba(0, 195, 255, 0.3);
  border-radius: 5px;
  background-color: rgba(10, 10, 26, 0.4);
  box-shadow: 0 0 20px rgba(0, 195, 255, 0.2);
  backdrop-filter: blur(5px);
  overflow: hidden;
  transition: all 0.3s ease;
}

.vr-holo-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, rgba(0, 195, 255, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 195, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.vr-holo-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 195, 255, 0.2), transparent);
  animation: holo-scan 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes holo-scan {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* 三角形网络背景 */
.vr-triangle-network {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.2;
  background-color: transparent;
  background-image:
    linear-gradient(
      30deg,
      rgba(0, 195, 255, 0.05) 12%,
      transparent 12.5%,
      transparent 87%,
      rgba(0, 195, 255, 0.05) 87.5%,
      rgba(0, 195, 255, 0.05)
    ),
    linear-gradient(
      150deg,
      rgba(0, 195, 255, 0.05) 12%,
      transparent 12.5%,
      transparent 87%,
      rgba(0, 195, 255, 0.05) 87.5%,
      rgba(0, 195, 255, 0.05)
    ),
    linear-gradient(
      30deg,
      rgba(0, 195, 255, 0.05) 12%,
      transparent 12.5%,
      transparent 87%,
      rgba(0, 195, 255, 0.05) 87.5%,
      rgba(0, 195, 255, 0.05)
    ),
    linear-gradient(
      150deg,
      rgba(0, 195, 255, 0.05) 12%,
      transparent 12.5%,
      transparent 87%,
      rgba(0, 195, 255, 0.05) 87.5%,
      rgba(0, 195, 255, 0.05)
    ),
    linear-gradient(
      60deg,
      rgba(170, 0, 255, 0.05) 25%,
      transparent 25.5%,
      transparent 75%,
      rgba(170, 0, 255, 0.05) 75%,
      rgba(170, 0, 255, 0.05)
    ),
    linear-gradient(
      60deg,
      rgba(170, 0, 255, 0.05) 25%,
      transparent 25.5%,
      transparent 75%,
      rgba(170, 0, 255, 0.05) 75%,
      rgba(170, 0, 255, 0.05)
    );
  background-size: 40px 70px;
  background-position:
    0 0,
    0 0,
    20px 35px,
    20px 35px,
    0 0,
    20px 35px;
  animation: triangle-pulse 8s infinite alternate;
}

@keyframes triangle-pulse {
  0% {
    opacity: 0.1;
    background-size: 40px 70px;
  }
  100% {
    opacity: 0.2;
    background-size: 60px 105px;
  }
}

/* 科技接口扫描线 */
.vr-interface-scan {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.vr-scan-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 195, 255, 0.5),
    rgba(0, 195, 255, 0.8),
    rgba(0, 195, 255, 0.5),
    transparent
  );
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.7);
  opacity: 0;
  z-index: 10;
  animation: interface-scan 5s ease-in-out infinite;
}

@keyframes interface-scan {
  0%,
  100% {
    top: 0;
    opacity: 0;
  }
  10%,
  90% {
    opacity: 1;
  }
  50% {
    top: 100%;
  }
}

/* HUD边框效果 */
.vr-hud-frame {
  position: relative;
  overflow: visible;
}

.vr-hud-frame::before,
.vr-hud-frame::after,
.vr-hud-frame .corner-tl,
.vr-hud-frame .corner-tr,
.vr-hud-frame .corner-bl,
.vr-hud-frame .corner-br {
  content: '';
  position: absolute;
  background-color: rgba(0, 195, 255, 0.3);
  z-index: 1;
  transition: all 0.3s ease;
}

.vr-hud-frame::before {
  top: 0;
  left: 10px;
  width: calc(100% - 20px);
  height: 1px;
}

.vr-hud-frame::after {
  bottom: 0;
  left: 10px;
  width: calc(100% - 20px);
  height: 1px;
}

.vr-hud-frame .corner-tl,
.vr-hud-frame .corner-tr,
.vr-hud-frame .corner-bl,
.vr-hud-frame .corner-br {
  width: 1px;
  height: 10px;
}

.vr-hud-frame .corner-tl,
.vr-hud-frame .corner-tr,
.vr-hud-frame .corner-bl,
.vr-hud-frame .corner-br {
  left: 0;
}

.vr-hud-frame .corner-tr,
.vr-hud-frame .corner-br {
  right: 0;
}

.vr-hud-frame .corner-tl,
.vr-hud-frame .corner-tr {
  top: 0;
}

.vr-hud-frame .corner-bl,
.vr-hud-frame .corner-br {
  bottom: 0;
}

.vr-hud-frame:hover::before,
.vr-hud-frame:hover::after,
.vr-hud-frame:hover .corner-tl,
.vr-hud-frame:hover .corner-tr,
.vr-hud-frame:hover .corner-bl,
.vr-hud-frame:hover .corner-br {
  background-color: rgba(0, 195, 255, 0.8);
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.7);
}

/* ===== 超酷炫标题效果 ===== */
.vr-mega-title {
  position: relative;
  font-size: 3.5rem;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(90deg, #00c3ff, #60efff, #00aaff, #0077ff);
  background-size: 400% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: mega-title-gradient 8s linear infinite;
  text-shadow:
    0 0 10px rgba(0, 195, 255, 0.5),
    0 0 20px rgba(0, 195, 255, 0.3),
    0 0 30px rgba(0, 195, 255, 0.2);
  margin: 0 auto 60px;
  padding: 10px 0;
  transform-style: preserve-3d;
  perspective: 1000px;
  display: inline-block;
}

.vr-mega-title::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: transparent;
  background: linear-gradient(90deg, #aa00ff, #da70d6, #ee82ee, #da70d6);
  background-size: 400% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: mega-title-gradient 8s linear infinite reverse;
  opacity: 0.5;
  transform: translateZ(-10px);
  filter: blur(10px);
}

.vr-mega-title::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, transparent, #00c3ff, #00aaff, transparent);
  background-size: 300% 100%;
  animation: mega-title-line 4s infinite;
  border-radius: 3px;
  box-shadow:
    0 0 10px rgba(0, 195, 255, 0.7),
    0 0 20px rgba(0, 195, 255, 0.5);
}

.vr-mega-title .glitch-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 0;
  animation: mega-title-glitch 5s infinite;
}

.vr-mega-title .glitch-layer:nth-child(1) {
  left: -2px;
  animation-delay: 0.5s;
}

.vr-mega-title .glitch-layer:nth-child(2) {
  left: 2px;
  animation-delay: 1.5s;
}

.vr-mega-title .highlight {
  background: linear-gradient(90deg, #aa00ff, #da70d6, #ee82ee);
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: mega-title-gradient-alt 6s linear infinite;
  text-shadow:
    0 0 10px rgba(170, 0, 255, 0.5),
    0 0 20px rgba(170, 0, 255, 0.3),
    0 0 30px rgba(170, 0, 255, 0.2);
  font-weight: 900;
  position: relative;
  display: inline-block;
}

.vr-mega-title .highlight::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #aa00ff, transparent);
  animation: mega-title-line-alt 3s infinite alternate;
  opacity: 0.7;
}

.vr-mega-title .digital-noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes mega-title-gradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}

@keyframes mega-title-gradient-alt {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

@keyframes mega-title-line {
  0%,
  100% {
    background-position: 0% 50%;
    opacity: 0.7;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
}

@keyframes mega-title-line-alt {
  0% {
    opacity: 0.3;
    transform: scaleX(0.8);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes mega-title-glitch {
  0%,
  100% {
    opacity: 0;
    transform: translateX(0);
  }
  10%,
  10.2% {
    opacity: 1;
    transform: translateX(-2px);
  }
  10.4%,
  10.6% {
    opacity: 0;
    transform: translateX(0);
  }
  40%,
  40.2% {
    opacity: 1;
    transform: translateX(2px);
  }
  40.4%,
  40.6% {
    opacity: 0;
    transform: translateX(0);
  }
  80%,
  80.2% {
    opacity: 1;
    transform: translateX(-1px);
  }
  80.4%,
  80.6% {
    opacity: 0;
    transform: translateX(0);
  }
}

/* 3D视角标题悬浮效果 */
.vr-floating-title {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.3s ease;
  position: relative;
  display: inline-block;
}

.vr-floating-title:hover {
  transform: translateZ(20px) rotateX(10deg) rotateY(-10deg);
}

/* 全息投影文字边框 */
.vr-hologram-title {
  position: relative;
  padding: 15px 30px;
  border: 2px solid rgba(0, 195, 255, 0.3);
  border-radius: 8px;
  box-shadow:
    0 0 10px rgba(0, 195, 255, 0.3),
    inset 0 0 30px rgba(0, 195, 255, 0.1);
  background: rgba(10, 10, 26, 0.5);
  backdrop-filter: blur(5px);
  overflow: hidden;
  z-index: 1;
}

.vr-hologram-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 195, 255, 0.1), transparent);
  animation: holo-title-scan 5s infinite;
  z-index: -1;
}

@keyframes holo-title-scan {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

/* 替换默认标题样式 */
.section-title.tech-title,
.tech-title {
  position: relative;
  margin-bottom: 60px;
}

/* 标题重置与强调 */
.vr-mega-title + p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.3rem;
  max-width: 800px;
  margin: -30px auto 50px;
  text-align: center;
  letter-spacing: 1px;
}
